
<template>
  <div>
    <!-- 头部 -->
    <hm-header>我的关注</hm-header>
    <!-- 列表 -->
    <div class="list">
      <div class="item" v-for='item in follows' :key='item.id'>
        <div class="left">
          <img :src="$axios.defaults.baseURL + item.head_img" alt="">
        </div>
        <div class="center">
          <div class="nickname">{{item.nickname}}</div>
          <div class="date">{{ item.create_date | date }}</div>
        </div>
        <div class="right" @click='unfollow(item.id)'>
          取消关注
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      follows : []
    }
  },

  created(){
    // this.getFollowUsers()
    this.follow()
  },
  methods: {
    getFollowUsers(){
      this.$axios.get('/user_follows').then(res => {
         console.log('关注 用户列表',res.data);
         this.follows =  res.data.data
      })
    },
    follow(){
     
       this.$axios.get('/user_follows/6').then(res => {
         console.log('关注用户',res.data);
         this.getFollowUsers()
      })
    },
    unfollow(id){
       
       this.$axios.get(`/user_unfollow/${id}`).then(res => {
         console.log('取消关注用户',res.data);
         if (res.data.statusCode === 200) {
           this.$toast.success('取消关注成功')
           this.getFollowUsers()
         }
      })
    },
  }

}
</script>

<style scoped lang='less'>
.item {
  height: 80px;
  border-bottom: 1px solid #ccc;
  padding: 0 20px;

  display: flex;
  align-items: center;

  .left {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .center {
    flex: 1;
    
    padding-left: 20px;
    height: 50px;
    line-height: 25px;
  }
  .right {
    background: lime;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    color: #000;
    background: #ddd;
  }
}

</style>